<template>
  <div class="billList branchCompany" v-if="level === 'branchCompany'">
    <div v-if="orgId" class="back" @click="goBack">
        <el-button icon="el-icon-d-arrow-left">返回</el-button>
    </div>
    <div class="title"> {{ orgName ? orgName : orgInfo.orgName }}分类、汇总台账 </div>
    <el-table
        ref="table"
        :data="tableData"
        border
        highlight-current-row
        class="table"
        row-key="uuid"
    >
        <el-table-column type="" width="50" align="left">
            <template slot-scope="{ row, $index }">
                <el-checkbox v-if="$index > 0" v-model="row.isChecked" @change="changeCheckbox()"></el-checkbox>
            </template>
        </el-table-column>
        <el-table-column label="机构名称" prop="orgName" show-overflow-tooltip min-width="150" align="left" class-name="blue-column">
            <template slot-scope="{ row, $index }">
                <div v-if="$index > 0"  @click="showProjectDepartment(row)">{{ row.orgName }}</div>
                <div v-else class="count">{{ row.orgName }}</div>
            </template>
        </el-table-column>
        <el-table-column label="借方">
            <el-table-column label="金额" prop="debtorAmount" width="150" show-overflow-tooltip>
                <template slot-scope="{ row, $index }">
                    <div v-if="$index > 0">{{ row.debtorAmount }}</div>
                    <div v-else class="count">{{ row.debtorAmount }}</div>
                </template>
            </el-table-column>
        </el-table-column>
        <el-table-column label="贷方">
            <el-table-column label="金额" prop="creditorAmount" width="150" show-overflow-tooltip>
                <template slot-scope="{ row, $index }">
                    <div v-if="$index > 0">{{ row.creditorAmount }}</div>
                    <div v-else class="count">{{ row.creditorAmount }}</div>
                </template>
            </el-table-column>
        </el-table-column>
        <el-table-column label="余额">
            <el-table-column label="金额" prop="balanceAmount" width="150" show-overflow-tooltip>
                <template slot-scope="{ row, $index }">
                    <div v-if="$index > 0">{{ row.balanceAmount }}</div>
                    <div v-else class="count">{{ row.balanceAmount }}</div>
                </template>
            </el-table-column>
        </el-table-column>
    </el-table>
  </div>
  <ProjectDepartment v-else-if="level === 'projectDepartment'" :orgId="projectDepartmentOrgId" :orgName="projectDepartmentOrgName" @cancel="cancel"></ProjectDepartment>
</template>

<script>
import ProjectDepartment from '@/pages/comprehensiveReport/materialReport/subsummaryLedger/projectDepartment.vue'
import {  getUuid, showLoading, hideLoading } from '@/utils/common'
import { mapState } from 'vuex'
import request from '@/api/comprehensiveReport/subsummaryLedger'
export default {
    props: ['orgId', 'orgName'],
    data () {
        return {
            tableData: [],
            searchForm: {
                orgId: ''
            },
            mapObj: {},
            level: 'branchCompany'
        }
    },
    components: {
        ProjectDepartment
    },
    computed: {
        ...mapState({
            orgInfo: state => state.userInfo.orgInfo,
            orgTypeList: state=>state.orgTypeList
        }),
    },
    watch: {
        orgId: {
            handler (newName) {
                this.searchForm.orgId = newName
                this.searchForm.orgName = this.orgName
                this.getList()
            },
            immediate: true,
            deep: true
        },
    },
    mounted () {
        if(!this.orgId && localStorage.getItem('searchOrgId')) {
            this.searchForm.orgId = localStorage.getItem('searchOrgId')
            this.searchForm.orgName = localStorage.getItem('searchOrgOrgName')
            this.getList()
        }else if(!this.orgId &&  this.orgInfo.orgId) {
            this.searchForm.orgId = this.orgInfo.orgId
            this.searchForm.orgName = this.orgInfo.orgName
            this.getList()
        }
    },
    methods: {
        objectSpanMethod ({ rowIndex, columnIndex }) {
            if (columnIndex === 2) {
                if (rowIndex  === 0) {
                    return {
                        rowspan: 1,
                        colspan: 3
                    }
                }
            }
        },
        getList () {
            if(this.tableData.length > 0) return
            showLoading()
            request.getconstituentcompany(this.searchForm).then(res => {
                const count = {
                    balanceAmount: 0,
                    creditorAmount: 0,
                    debtorAmount: 0,
                    orgId: null,
                    orgName: '合计',
                }
                res.forEach(x=>{
                    x.isChecked = true
                    count.balanceAmount += x.balanceAmount
                    count.creditorAmount += x.creditorAmount
                    count.debtorAmount += x.debtorAmount
                })
                this.tableData = [
                    count,
                    ...res
                ]
                hideLoading()
            }).catch(()=>{
                hideLoading()
            })
        },
        //明细数据汇总方法
        uniqueArray (arr, key) {
            const map = new Map()
            return arr.filter(item => {
                const val = item[key] + '' || getUuid()
                return !map.has(val) && map.set(val, 1)
            })
        },
        count_ (obj) {
            return obj.children.reduce((prev, c) => {
                if(c.changeType === -1) {
                    return prev
                }else{
                    prev = (parseFloat(prev) + parseFloat(c.amount) || 0).toFixed(2)
                    return prev
                }
            }, 0)
        },
        showProjectDepartment (row) {
            this.level = 'projectDepartment'
            this.projectDepartmentOrgId = row.orgId
            this.projectDepartmentOrgName = row.orgName
        },
        goBack () {
            this.level = 'branchCompany'
            this.$emit('cancel')
        },
        cancel () {
            this.level = 'branchCompany'
        },
        changeCheckbox () {
            const count = this.tableData[0]//分子公司小计列
            const countList = this.tableData.slice(1).filter(x=>x.isChecked)//分子公司数据
            count.debtorAmount = countList.reduce((count, prev) => count + prev.debtorAmount, 0)
            count.creditorAmount = countList.reduce((count, prev) => count + prev.creditorAmount, 0)
            count.balanceAmount = countList.reduce((count, prev) => count + prev.balanceAmount, 0)
        }
    }

}
</script>

<style lang="scss" scoped>
.branchCompany{
    .count{
        font-weight: 700;
        text-align: center;
        color:#000;
    }
    .title{
        font-size: 22px;
        margin: 30px;
        margin-top: 20px;
        text-align: center;
    }
}

</style>